{% extends 'frontend/index_base.html' %}

{% block title %}{{ exam.name }} - 答题解析{% endblock %}

{% block extra_css %}
<style>
.analysis-card {
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.question-type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: #e3f2fd;
    color: #1976d2;
}

.question-result {
    font-weight: bold;
}

.correct {
    color: #4caf50;
}

.incorrect {
    color: #f44336;
}

.answer-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.answer-item {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.user-answer {
    background-color: #fff3e0;
}

.correct-answer {
    background-color: #e8f5e9;
}

.option-list {
    list-style: none;
    padding-left: 0;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 4px;
}

.option-item.selected {
    background-color: #fff3e0;
}

.option-item.correct {
    background-color: #e8f5e9;
}

.score-summary {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.score-display {
    font-size: 2rem;
    font-weight: bold;
    color: #1976d2;
    margin-bottom: 1rem;
}

.submit-time {
    color: #757575;
    font-size: 0.875rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="score-summary">
        <div class="score-display">得分：{{ submission.score }}分</div>
        <p class="mb-2">答对：{{ submission.correct_answers }}/{{ submission.total_questions }}题</p>
        <div class="progress mb-3" style="height: 20px;">
            <div class="progress-bar bg-success" 
                 role="progressbar" 
                 style="width: {{ (submission.correct_answers/submission.total_questions*100)|round }}%"
                 aria-valuenow="{{ submission.correct_answers }}" 
                 aria-valuemin="0" 
                 aria-valuemax="{{ submission.total_questions }}">
                {{ (submission.correct_answers/submission.total_questions*100)|round }}%
            </div>
        </div>
        <p class="submit-time">提交时间：{{ submission.submit_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
    </div>

    {% for question in exam.questions %}
    {% set question_index = loop.index0 %}
    <div class="analysis-card">
        <div class="question-header">
            <div class="question-type-badge">
                {% if question.type == 'single' %}
                单选题
                {% elif question.type == 'multiple' %}
                多选题
                {% else %}
                判断题
                {% endif %}
            </div>
            
            {% if question.has_image and question.image_path %}
            <div class="question-image mb-3">
                <img src="{{ question.image_path }}" class="img-fluid rounded border" alt="题目图片" style="max-width: 100%; max-height: 400px;">
            </div>
            {% endif %}
            
            <div class="question-title">{{ loop.index }}. {{ question.title }}</div>
            <div class="question-result 
                {% if question.type == 'single' %}
                    {{ 'correct' if submission.user_answers[question_index] == question.correct_answers[0] else 'incorrect' }}
                {% elif question.type == 'multiple' %}
                    {{ 'correct' if submission.user_answers[question_index]|sort == question.correct_answers|sort else 'incorrect' }}
                {% else %}
                    {{ 'correct' if submission.user_answers[question_index] == question.correct_answers[0] else 'incorrect' }}
                {% endif %}">
                {% if question.type == 'single' and submission.user_answers[question_index] == question.correct_answers[0] or
                   question.type == 'multiple' and submission.user_answers[question_index]|sort == question.correct_answers|sort or
                   question.type == 'boolean' and submission.user_answers[question_index] == question.correct_answers[0] %}
                <i class="fas fa-check"></i> 正确
                {% else %}
                <i class="fas fa-times"></i> 错误
                {% endif %}
            </div>
        </div>

        <div class="options-section">
            {% if question.type == 'boolean' %}
            <ul class="option-list">
                <li class="option-item {{ 'selected' if submission.user_answers[question_index] == true }} {{ 'correct' if question.correct_answers[0] == true }}">
                    <span class="me-2">
                        {% if submission.user_answers[question_index] == true %}
                        <i class="fas fa-check-circle"></i>
                        {% endif %}
                    </span>
                    正确
                </li>
                <li class="option-item {{ 'selected' if submission.user_answers[question_index] == false }} {{ 'correct' if question.correct_answers[0] == false }}">
                    <span class="me-2">
                        {% if submission.user_answers[question_index] == false %}
                        <i class="fas fa-check-circle"></i>
                        {% endif %}
                    </span>
                    错误
                </li>
            </ul>
            {% else %}
            <ul class="option-list">
                {% for option in question.options %}
                <li class="option-item 
                    {% if question.type == 'single' %}
                        {{ 'selected' if loop.index0 == submission.user_answers[question_index] }} 
                        {{ 'correct' if loop.index0 == question.correct_answers[0] }}
                    {% else %}
                        {{ 'selected' if loop.index0 in submission.user_answers[question_index] }} 
                        {{ 'correct' if loop.index0 in question.correct_answers }}
                    {% endif %}">
                    <span class="me-2">
                        {% if question.type == 'single' %}
                            {% if loop.index0 == submission.user_answers[question_index] %}
                            <i class="fas fa-check-circle"></i>
                            {% endif %}
                        {% else %}
                            {% if loop.index0 in submission.user_answers[question_index] %}
                            <i class="fas fa-check-circle"></i>
                            {% endif %}
                        {% endif %}
                    </span>
                    {{ option }}
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>

        <div class="answer-section">
            <div class="user-answer">
                <strong>你的答案：</strong>
                {% if question.type == 'boolean' %}
                    {{ '正确' if submission.user_answers[question_index] else '错误' }}
                {% elif question.type == 'single' %}
                    {{ question.options[submission.user_answers[question_index]] }}
                {% else %}
                    {% for idx in submission.user_answers[question_index] %}
                        {{ question.options[idx] }}
                        {%- if not loop.last %}, {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
            <div class="correct-answer mt-2">
                <strong>正确答案：</strong>
                {% if question.type == 'boolean' %}
                    {{ '正确' if question.correct_answers[0] else '错误' }}
                {% elif question.type == 'single' %}
                    {{ question.options[question.correct_answers[0]] }}
                {% else %}
                    {% for idx in question.correct_answers %}
                        {{ question.options[idx] }}
                        {%- if not loop.last %}, {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="text-center mt-4">
        <a href="{{ url_for('exercises.scratch_exercises.exam_list', level='all') }}" class="btn btn-primary">
            返回试卷列表
        </a>
    </div>
</div>
{% endblock %}
